---
id: stack
title: Stack
---

import { Props, BoxProps } from '../../core/components';

`Stack` distributes children vertically with equal spacing between them, plus an optional separator element.

### Space

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Placeholder />
      <Placeholder />
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Nested

```jsx live
const App = () => {
  return (
    <Stack space={12}>
      <Stack space={2}>
        <Placeholder />
        <Placeholder />
      </Stack>
      <Stack space={2}>
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </Stack>
    </Stack>
  )
}

render(<App />)
```

### Align

```jsx live
const App = () => {
  return (
    <Stack space={4} align="center">
      <Placeholder width={160} />
      <Placeholder width={220} />
      <Placeholder width={160} />
    </Stack>
  )
}

render(<App />)
```

### Horizontal

```jsx live
const App = () => {
  return (
    <Stack space={4} horizontal={true} align="center">
      <Placeholder width={60} height={100} />
      <Placeholder width={60} height={160} />
      <Placeholder width={60} height={120} />
    </Stack>
  )
}

render(<App />)
```

### Divider

```jsx live
const styles = StyleSheet.create({
  divider: {
    height: StyleSheet.hairlineWidth,
    width: '100%',
    backgroundColor: 'rgba(97, 0, 255, 0.3)',
  },
})

const Divider = () => {
  return <View style={styles.divider} />
}

const App = () => {
  return (
    <Stack space={4} divider={<Divider />}>
      <Placeholder />
      <Placeholder height={100} />
      <Placeholder />
    </Stack>
  )
}

render(<App />)
```

### Props

:::info

`Stack` accepts all [`View`](https://reactnative.dev/docs/view) props.

:::

<Props
  data={[
    {
      name: 'space',
      type: 'responsiveProp<float>',
      required: false,
    },
    {
      name: 'align',
      type: 'responsiveProp<[#left | #center | #right | #stretch]>',
      required: false,
    },
    {
      name: 'horizontal',
      type: 'responsiveProp<bool>',
      required: false,
    },
    {
      name: 'divider',
      type: 'React.element',
      required: false,
    },
  ]}
/>

<BoxProps />
